<template>
  <el-form label-width="95px" :model="form" ref="form" size="small" :rules="rules" :disabled="show !== 4">
    <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="姓名：" prop="contact_name">
        <el-input class="w240" v-model="form.contact_name" maxlength="50"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="联系电话：" prop="contact_phone">
        <el-input class="w240" v-model="form.contact_phone" maxlength="11"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="电子邮箱：" prop="contact_email">
        <el-input class="w240" v-model="form.contact_email"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="微信号：" prop="contact_weixin">
        <el-input class="w240" v-model="form.contact_weixin"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="联系人QQ：">
        <el-input class="w240" v-model="form.contact_qq"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="支付宝账号：">
        <el-input class="w240" v-model="form.cantact_alipay"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
      <el-form-item label="公司职务：">
        <el-input class="w240" v-model="form.contact_duties"></el-input>
      </el-form-item>
    </el-col>
    <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
      <el-form-item >
        <el-button type="primary" size="small" @click="handleClickSubmit" :loading="loading" :disabled="disabled">提交审核</el-button>
      </el-form-item>
    </el-col>
  </el-form>
</template>

<script>
import { mapGetters } from 'vuex'
import { merchatnContactUpdate } from '@/api/shop'
import { validateEmail, validatePhone, validChinese } from '@/utils/validate'

export default {
  data() {
    const validEmail = (rule, value, callback) => {
      if (validateEmail(value)) {
        callback()
      } else {
        callback(new Error('邮箱格式错误~'))
      }
    }
    const validPhone = (rule, value, callback) => {
      if (validatePhone(value)) {
        callback()
      } else {
        callback(new Error('手机号码格式错误~'))
      }
    }
    const validateChinese = (rule, value, callback) => {
      if (validChinese(value)) {
        callback()
      } else {
        callback(new Error('输入格式错误~'))
      }
    }
    return {
      disabled: false,
      loading: false,
      form: {
        contact_name: '',
        contact_phone: '',
        contact_id_no: '',
        contact_duties: '',
        contact_email: '',
        contact_weixin: '',
        cantact_alipay: '',
        contact_qq: ''
      },
      rules: {
        contact_name: [{ required: true, trigger: 'blur', validator: validateChinese }],
        contact_phone: [{ required: true, trigger: 'blur', validator: validPhone }],
        contact_email: [{ required: true, trigger: 'blur', validator: validEmail }],
        contact_id_no: [{ required: true, trigger: 'blur', validator: validateChinese }],
        contact_duties: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        contact_weixin: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        cantact_alipay: [{ required: true, trigger: 'blur', validator: validateChinese }],
        contact_qq: [{ required: true, trigger: 'blur', validator: validateChinese }]
      }
    }
  },
  props: {
    merchantNum: {
      required: true
    },
    show: {
      required: true,
      type: Number
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  methods: {
    handleClickSubmit() {
      this.$refs['form'].validate((valid) => {
        this.loading = true
        merchatnContactUpdate(this.merchantNum, this.id, this.form).then(res => {
          if (res.data.errorCode === 0) {
            this.$message.success('联系人信息提交成功，请耐心等待审核~')
            this.loading = false
            this.disabled = true
            this.$emit('toogle', '5', 5)
          } else {
            this.loading = false
            this.$message.error(res.data.errorMsg)
          }
        })
      })
    }
  }
}
</script>